//后台框架
.cms-templates{
  overflow: auto;
  .item{
    background: var(--light-background);
    padding: var(--space-width);
    border-radius: var(--radius-width);
    width: 200px;
    float: left;
    border: solid 1px var(--border-color);
    transition: border-color .3s;
    .preview{height: 200px;overflow: hidden;
      img{width: 100%;}
    }
    margin: var(--space-width);
    .name{
      padding-top: var(--space-width);
    }
    &:hover{
      border-color: var(--color-primary);
    }
  }
  &.selectable{
    .item{
      cursor: pointer;
      border: dashed 1px var(--color-medium);
      &:hover{
        border-color: var(--color-primary-light);
      }
      &.selected{
        border: solid 1px var(--color-primary);
      }
    }
  }
  &.small{
    .item{
      padding: var(--space-width-half);
      margin: var(--space-width-half);
      width: 80px;
      .preview{height: calc(100% - var(--space-width));}
    }
  }
}
//图集
.cms-focus-pictures{
  overflow: auto;
  display: flex;
  flex-flow: wrap;
  .item{
    margin: var(--space-width-half);
    float: left;
    width: 200px;
    background: var(--hover-background);
    border: solid 1px var(--border-color);
    padding: var(--space-width);
    border-radius: var(--radius-width);
    overflow: visible;
    .picture{
      height: calc(200px - var(--space-width) * 2);
      overflow: hidden;
      display: flex;
      flex-flow: column;
      justify-content: center;
      img{
        max-width: 100%;
        display: block;
        margin: 0 auto;
      }
    }
    .swiper{
      height: calc(200px - var(--space-width) * 2);
      overflow: hidden;
      img{
        max-width: 100%;
        display: block;
        margin: 0 auto;
        max-height: calc(200px - var(--space-width) * 2);
      }
      .swiper-item{
        position: relative;
        .swiper-desc{
          position: absolute;
          z-index: 2;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: var(--space-width);
          background: rgba(0,0,0,.3);
          color: #fff;
          font-size: 12px;
        }
      }
      .ant-carousel{
        height: calc(200px - var(--space-width) * 2);
        display: flex;
        flex-flow: column;
        justify-content: center;
        background: var(--background);
        border-radius: var(--radius-width);
      }
    }
    .desc{
      padding: var(--space-width) 0;
    }
    &.btn{
      min-height: 300px;
      border: dashed 1px var(--color-medium);
      transition: 300ms;
      display: flex;
      flex-flow: column;
      justify-content: center;
      text-align: center;
      font-size: 36px;
      color: var(--color-medium);
      cursor: pointer;
      &:hover{
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
    }
  }
}

.cms-tree{
  .toggle{cursor: pointer;
    transition: 300ms;
    &:hover{opacity: .8;}
    &:active{opacity: 1;}
  }
  .add-sub{
    opacity: 0;
    transition: 300ms;
  }
  &:hover{
    .add-sub{
      opacity: 1;
    }
  }
}
.aside-sites{
  .site{
    margin: var(--space-width);
    border-radius: var(--radius-width);
    user-select: none;
    cursor: pointer;
    padding: var(--space-width);
    transition: 300ms;
    &:hover{
      background: var(--hover-background);
    }
    &.selected{
      background: var(--color-dark-light);
      color: var(--color-dark-contrast);
    }
  }
}

.inphp-admin-layout-content{
  .inphp-admin-layout-content-main:first-child{
    margin-top: 0;
  }
}

.link-hover{
  &:hover{
    color: var(--color-primary);
    text-decoration: underline;
  }
}

.line-height-20px { line-height: 20px; }